<template>
  <div class="waterPriceReform">
    <TitleColumn name="水价改革" />
    <section class="content">
      <ul class="list">
        <li><h3>覆盖街道(个)</h3><CountTo :startVal="1" :endVal="3" :duration="1000" /></li>
        <li><h3>监测站点(个)</h3><CountTo :startVal="1" :endVal="487" :duration="2000" /></li>
        <li><h3>用水大户(个)</h3><CountTo :startVal="1" :endVal="306" :duration="1000" /></li>
        <li><h3>计划改革面积(亩)</h3><CountTo :startVal="1" :endVal="176384" :duration="5000" /></li>
        <li><h3>已改革面积(亩)</h3><CountTo :startVal="1" :endVal="167832" :duration="5000" /></li>
      </ul>
      <div class="column">
        <ChartsColumn />
        <ListColumn />
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { CountTo } from '@gui-pkg/components';
  import TitleColumn from '@/components/TitleColumn';
  import ChartsColumn from './ChartsColumn';
  import ListColumn from './ListColumn';

  defineOptions({ name: 'WaterPriceReform' });

  const state = reactive({
    name: 'vue3',
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .waterPriceReform {
    width: 680px;
    .content {
      width: 100%;
      height: calc(100% - 24px);
      background: #02123433;
      backdrop-filter: blur(10px);
      ul.list {
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        margin-bottom: 10px;
        li {
          width: 78px;
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &::after {
            content: '';
            display: inline-block;
            width: 72px;
            height: 44px;
            background: url(./images/baseIcon.png) no-repeat;
            background-size: contain;
            position: absolute;
            bottom: 0;
            z-index: -1;
          }
          h3 {
            color: #fff;
            font-size: 10px;
            margin-bottom: 4px;
          }
          span {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            line-height: 18px;
            padding-bottom: 10px;
            transform: scaleY(1.1);
          }
        }
      }
      .column {
        display: flex;
        align-items: center;
        height: calc(100% - 78px);
      }
    }
  }
</style>
